<template>
	<div>
		<p class="font14 mt5 flex" :style="{color:props.color}" style="align-items: center;">
			{{ props.msg }}
			<el-tooltip v-if="props.isPicUrl" class="item" effect="dark" placement="top" >
				<template #content>
					<img :src="props.picUrl" :style="{width:props.width}" alt="Tooltip中的图片" />
				</template>
				<p style="align-items: center;display: flex;" class="ml5"><el-icon><QuestionFilled /></el-icon> 示例</p>
			</el-tooltip>
		</p>
	</div>
</template>

<script setup lang="ts">
import { QuestionFilled } from '@element-plus/icons-vue'
// 定义父组件传过来的值
const props = defineProps({
	// 背景颜色
	bgColor: {
		type: String,
		default: () => 'none',
	},
    // 字体颜色
    color: {
		type: String,
		default: () => 'var(--el-color-primary-light-2)',
	},
	// 内容信息
	msg: {
		type: String,
		default: () => '请输入内容...',
	},
	isPicUrl:{
		type: Boolean,
		default: false,
	},
	// 示例图片
	picUrl: {
		type: String,
	},
	width:{
		type: String,
		default: '260px',
	}
});
</script>
